<template>
	<view class="d-flex text-center">
		<view @click="gcdetailsshow" :class="gcdetailsShow ? 'css' : 'css1'">商家详情</view>
		<view @click="yglistshow" :class="yglistShow ? 'css' : 'css1'">员工列表</view>
	</view>
</template>

<script>
	export default {
		props: {
			gcdetailsShow: Boolean,
			yglistShow: Boolean,
		},
		methods: {
			//商家选项卡
			gcdetailsshow() {
				this.gcdetailsShow = true;
				this.yglistShow = false
			},
			
			//员工选项卡
			yglistshow() {
				this.gcdetailsShow = false;
				this.yglistShow = true;
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/common/main.css';
	@import  '@/common/zcm-main.css';
	
	@mixin xuanxiangka {
		width: 50%;
		text-align: center;
		padding-top: 15rpx;
		padding-bottom: 10rpx;
		font-size: 30rpx;
		margin: 40rpx 0rpx 20rpx 0rpx;
	}
	
	.css {
		@include xuanxiangka;
		background-color: #475dfc;
		color: #fff;
		border-radius: 30rpx 30rpx 0 0;
	}
	
	.css1 {
		@include xuanxiangka;
		border-bottom: solid 5rpx #475dfc;
	}
</style>
